@charset "utf-8";
/*
Theme Name: Restext/Night Restext  
Theme URI: https://amrx.me  
Author: 简 / Jane  
Author URI: https://amrx.me  
Description:  
「让文字像晨光中的薄雾般自然舒展」  
- 基于 hsl(228deg 62% 75%) 的雾蓝色彩系统  
- 三级呼吸间距(--space-sm/md/lg)模拟自然律动  
- 背景 hsl(0deg 0% 95%) 如初雪般纯净  
- 动态效果遵循植物生长节奏(--transition-*)  

Version: 2.2.0  
Text Domain: morningmist  
Tags: blog, minimalism, nature, typography  

=== 晨光色谱 ===  
■ 基础色调：  
   - 雪地：--color-background (hsl(0deg 0% 95%))  
   - 松果：--color-text-primary (#5A5A5A)  
   - 枯枝：--color-text-secondary (#9f9fa0)  

■ 雾蓝层次：  
   L1 晨露：--color-blue-5 (5%透明度)  
   L2 溪水：--color-blue-20  
   L3 湖面：--color-blue-50  
   L4 远山：--color-blue-80  

=== 空间韵律 ===  
🍃 叶片间隙：  
   - 导航高度：--layout-nav-height (4rem)  
   - 露珠间距：--space-sm (0.5rem)  

🌿 茎秆节段：  
   - 标准间距：--space-md (1rem)  
   - 文章宽度：--layout-max-article-width (65rem)  

🌳 树冠层：  
   - 开放间距：--space-lg (3rem)  

=== 生长节奏 ===  
⏳ 露珠滑落：--transition-fast (0.2s)  
⌛ 枝叶舒展：--transition-medium (0.3s)  
⏳ 季相更替：--transition-slow (0.5s)  
⌛ 微风回弹：--easing-bounce (cubic-bezier)  

[园丁手册]  
1. 代码块建议使用--color-background-blue模拟水影  
2. 悬停状态组合--color-white-15与--shadow-light如薄霜  
3. 重点交互采用--color-accent-blue作勿忘草色标  
4. 暗色模式可启用--color-blue-5作为夜雾滤镜  
*/
/* ==============================================
   全局变量与基础设置
   ============================================== */
:root {
	/* ========== 色彩系统 ========== */
	/* 基础色 */
	--color-background: hsl(0deg 0% 95% / 100%);
	/* 主背景色 */
	--color-text-primary: #5A5A5A;
	/* 主文本色 */
	--color-text-secondary: #9f9fa0;
	/* 次文本色 */
	--color-accent-blue: hsl(228deg 62% 75%);
	/* 强调蓝色 */
	--color-background-blue: rgb(202 212 255);

	/* 透明色 */
	--color-white-15: hsl(0deg 0% 100% / 15%);
	/* 15%透明白 */
	--color-white-50: hsl(0deg 0% 100% / 50%);
	/* 50%透明白 */
	--color-white-80: hsl(0deg 0% 100% / 80%);
	/* 80%透明白 */
	--color-blue-5: hsl(228deg 62% 75% / 5%);
	/* 5%透明蓝 */
	--color-blue-20: hsl(228deg 62% 75% / 20%);
	/* 20%透明蓝 */
	--color-blue-50: hsl(228deg 62% 75% / 50%);
	/* 50%透明蓝 */
	--color-blue-80: hsl(228deg 62% 75% / 80%);
	/* 50%透明蓝 */

	/* ========== 布局系统 ========== */
	--layout-nav-height: 4rem;
	/* 导航栏高度 */
	--layout-max-article-width: 65rem;
	/* 文章最大宽度 */

	/* ========== 间距系统 ========== */
	--space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 3rem;

	/* ========== 视觉效果 ========== */
	/* 阴影 */
	--shadow-default: 0 0.2rem 1rem 0 hsl(0deg 0% 15% / 10%);
	--shadow-light: 0 0.2rem 1rem 0 hsl(0deg 0% 15% / 4%);

	/* 过渡效果 */
	--transition-fast: all 0.2s ease;
	--transition-medium: all 0.3s ease-in-out;
	--transition-slow: all 0.5s ease;

	/* 动画曲线 */
	--easing-bounce: cubic-bezier(.6, .2, .25, 1);

}

/* 全局重置 */
* {
	scrollbar-width: thin;
	/* 滚动条宽度 */
	scrollbar-color: rgb(56 88 246 / .5) rgb(56 88 246 / 5%);
	/* 滚动条颜色 */
	font: inherit;
	/* 字体继承 */
	color: inherit;
	/* 颜色继承 */
	padding: 0;
	/* 内边距重置 */
	margin: 0;
	/* 外边距重置 */
	border: none;
	/* 边框重置 */
	outline: none;
	/* 轮廓重置 */
	box-sizing: border-box;
	/* 盒模型设置 */
}

/* HTML基础设置 */
html {
	scroll-behavior: smooth;
	/* 平滑滚动 */
	color-scheme: dark;
}

/* 主体设置 */
body {
	background: var(--color-background);
	/* 使用变量设置背景 */
}

/* 链接重置 */
a {
	color: inherit;
	/* 继承颜色 */
	text-decoration: none;
	/* 去除下划线 */
	transition: .2s;
}

/* 列表重置 */
li {
	list-style: none;
	/* 去除列表样式 */
}

/* 图片设置 */
img {
	max-width: 100%;
	transition: .5s;
}

img.lazy-loading {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.line-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--line-clamp, 1);
	text-overflow: ellipsis;
	overflow: hidden;
}

.wrap-long-text {
	word-break: break-all;
	/* 强制在任何字符间换行 */
	overflow-wrap: break-word;
	/* 优先在单词合适位置换行（如果可能）*/
	white-space: normal;
	/* 确保不强制单行 */
}

/* ==============================================
   首页头部样式
   ============================================== */

/* 首页标题样式 */
.home-header-bg-full .hero-header-title {
	font-weight: 600;
	/* 字体粗细 */
	font-size: clamp(1.5em, 50vh / 11, 4em);
	/* 响应式字体大小 */
	letter-spacing: max(2px, 50vh / 11 / 10);
	/* 字母间距 */
	text-shadow: 0.1em 0.1em var(--color-blue-20);
	/* 文字阴影 */
}

/* ==============================================
   波浪效果样式
   ============================================== */

/* 波浪容器 */
.waves-box {
	width: 100%;
	/* 全宽 */
	position: absolute;
	/* 绝对定位 */
	left: 0;
	/* 左对齐 */
	bottom: -11px;
	/* 底部位置 */
	z-index: 0;
	/* 层级 */
	transition: all .5s;
	/* 过渡效果 */
}

/* 波浪元素 */
.waves-box .waves {
	width: 100%;
	/* 全宽 */
	height: 20px;
	/* 高度 */
}

/* 波浪动画元素 */
.parallax>use {
	animation: move-forever 30s cubic-bezier(.55, .5, .45, .5) infinite;
	/* 无限动画 */
	transition: fill .5s;
	/* 填充色过渡 */
}

/* 波浪图层1 */
.parallax>use:nth-child(1) {
	animation-delay: -2s;
	/* 动画延迟 */
	animation-duration: 7s;
	/* 动画时长 */
	fill: var(--color-background);
	/* 填充色 */
	opacity: .5;
	/* 透明度 */
}

/* 波浪图层2 */
.parallax>use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
	fill: var(--color-background);
	opacity: .6;
}

/* 波浪图层3 */
.parallax>use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
	fill: var(--color-background);
	opacity: .7;
}

/* 波浪图层4 */
.parallax>use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
	fill: var(--color-background);
	opacity: 1;
}

/* 波浪动画关键帧 */
@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0);
		/* 起始位置 */
	}

	to {
		transform: translate3d(85px, 0, 0);
		/* 结束位置 */
	}
}

/* ==============================================
   导航栏样式
   ============================================== */

/* 主导航容器 */
.hero-nav {
	position: fixed;
	/* 固定定位 */
	top: 0;
	/* 顶部对齐 */
	right: 0;
	/* 右侧对齐 */
	left: 0;
	/* 左侧对齐 */
	height: var(--layout-nav-height);
	/* 使用变量设置高度 */
	color: var(--color-white-80);
	/* 文字颜色 */
	list-style: none;
	/* 去除列表样式 */
	padding: var(--space-md);
	/* 内边距 */
	display: flex;
	/* 弹性布局 */
	align-items: center;
	/* 垂直居中 */
	gap: var(--space-lg);
	/* 子元素间距 */
	line-height: 1;
	/* 行高 */
	z-index: 9;
	/* 高层级 */
	transition: .5s;
}

.nav-fixed .hero-nav {
	--layout-nav-height: var(--space-lg);
	background: var(--color-white-80);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	outline: thin solid var(--color-blue-5);
	color: var(--color-text-primary);
}

/* 主导航菜单 */
.nav-category-wrapper{
    display: flex;
    align-items: center;
    gap: calc(var(--space-lg) - var(--space-md));
}
.nav-category-container {
	position: relative;
	display: inline-block;
}

.nav-category-container .category-trigger {
	position: relative;
	font-size: 1em;
}

.nav-category-container .category-trigger:before {
	content: attr(id);
}

.category-trigger {
	cursor: pointer;
	transition: all 0.3s ease;
}

.category-dropdown {
    --layout-nav-height:3rem;
	position: absolute;
	top: calc(var(--layout-nav-height) - var(--space-sm));
	left: 0;
	width: 18rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background: var(--color-white-80);
	box-shadow: var(--shadow-light);
	border-radius: 10px;
	color: var(--color-text-primary);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 9;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.nav-category-container:hover .category-dropdown {
	opacity: 1;
	visibility: visible;
}

.category-dropdown li {
	padding: var(--space-md) 1.5rem;
	border-radius: 10px;
	width: 50%;
	text-align: center;
}

.category-dropdown li:hover {
	background: var(--color-blue-20);
	color: var(--color-accent-blue);
}

.category-dropdown li a {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: all 0.2s ease;
}

/* 网站标志 */
.hero-nav .site-logo {
	font-size: 21px;
	/* 字体大小 */
	opacity: 1;
	/* 不透明度 */
	padding: 0 4px;
	/* 内边距 */
	transition: opacity .2s ease-out;
	/* 过渡效果 */
}

/* 网站名称 */
.hero-nav #site-name {
	position: relative;
	/* 相对定位 */
	transition: .3s;
	/* 过渡效果 */
}

/* 导航按钮 */
.hero-nav a.nav-button {
	padding: .5rem 0;
	/* 内边距 */
	border-radius: 10px;
	/* 圆角 */
	display: flex;
	/* 弹性布局 */
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
}

/* 导航按钮悬停效果 */
.hero-nav a.nav-button:hover {
	background: var(--color-white-15);
	/* 半透明背景 */
	color: inherit;
	/* 文字颜色 */
}

/* 网站标志图标 */
.hero-nav #site-name svg:not(.site-logo) {
	color: inherit;
	/* 文字颜色 */
	opacity: 0;
	/* 初始透明 */
	margin: 0 auto;
	/* 外边距 */
	position: absolute;
	/* 绝对定位 */
	transition: opacity .2s ease-out;
	/* 过渡效果 */
}

/* 网站名称悬停效果 */
.hero-nav #site-name:hover svg:not(.site-logo) {
	opacity: 1;
	/* 显示图标 */
	color: inherit;
	/* 白色 */
}

/* 网站名称悬停时隐藏文字标志 */
.hero-nav #site-name:hover .site-logo {
	opacity: 0;
	/* 透明 */
}

/* ==============================================
   通用容器样式
   ============================================== */

.container {
	padding: var(--space-md);
	/* 内边距 */
	margin: var(--space-md) auto;
	/* 外边距 */
}

/* ==============================================
   幻灯片/轮播图样式
   ============================================== */

/* 幻灯片列表容器 */
.slick-list {
	overflow: hidden;
	/* 隐藏溢出 */
}

/* 单个幻灯片容器 */
.single-list {
	position: relative;
	/* 相对定位 */
}

/* 首页头部幻灯片高度 */
.home-header-bg-full .slick-list {
	height: 70vh !important;
	/* 视口高度50% */
}

/* 单个幻灯片项目 */
.single-list .single-banlist {
	height: 100%;
	/* 100%高度 */
	width: 100%;
	/* 100%宽度 */
	position: relative;
	/* 相对定位 */
}

/* 幻灯片图片 */
.single-list .slick-slide img {
	display: block;
	/* 块级显示 */
	object-fit: cover;
	/* 覆盖填充 */
	height: 100%;
	/* 100%高度 */
	position: relative;
	/* 相对定位 */
	filter: brightness(0.85) blur(.5px);
	/* 滤镜效果 */
}

/* 单个幻灯片项 */
.single-list .single-item {
	overflow: hidden;
	/* 隐藏溢出 */
	position: relative;
	/* 相对定位 */
	height: 70vh;
	/* 视口高度50% */
}

/* 幻灯片标题 */
.single-list .single-banlist h1 {
	width: 100%;
	/* 100%宽度 */
	box-sizing: border-box;
	/* 盒模型 */
	color: #fff;
	/* 白色文字 */
	bottom: 1em;
	/* 底部距离 */
	left: 0;
	/* 左侧对齐 */
	position: absolute;
	/* 绝对定位 */
	right: 0;
	/* 右侧对齐 */
	display: flex;
	/* 弹性布局 */
	align-items: center;
	/* 垂直居中 */
	margin: auto;
	/* 自动外边距 */
	justify-content: center;
	/* 水平居中 */
	padding: 0 var(--space-md);
}

/* 幻灯片指示点 */
.slick-dots {
	position: absolute;
	/* 绝对定位 */
	bottom: 1em;
	/* 底部距离 */
	left: 0;
	/* 左侧对齐 */
	right: 0;
	/* 右侧对齐 */
	margin: 0;
	/* 外边距重置 */
	padding: 0;
	/* 内边距重置 */
	border: 0;
	/* 边框重置 */
	display: flex;
	/* 弹性布局 */
	gap: .5em;
	/* 子元素间距 */
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
	transition: opacity .15s ease-in-out;
	/* 过渡效果 */
}

/* 指示点按钮 */
.slick-dots li button {
	display: block;
	/* 块级显示 */
	margin: 0;
	/* 外边距重置 */
	padding: 0;
	/* 内边距重置 */
	border: 0;
	/* 边框重置 */
	width: 25px;
	/* 宽度 */
	height: 8px;
	/* 高度 */
	border-radius: 28px;
	/* 圆角 */
	background-color: var(--color-white-80);
	/* 背景色 */
	opacity: .5;
	/* 半透明 */
	line-height: 0;
	/* 行高 */
	font-size: 0;
	/* 字体大小 */
	cursor: pointer;
	/* 指针样式 */
	pointer-events: none;
	/* 禁用指针事件 */
}

/* 指示点悬停效果 */
.slick-dots li:hover button {
	opacity: 1;
	/* 不透明 */
}

/* 活动指示点 */
li.slick-active button {
	appearance: none;
	/* 去除默认样式 */
	display: flex;
	/* 弹性布局 */
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
	margin: 0;
	/* 外边距重置 */
	padding: 0;
	/* 内边距重置 */
	width: 8px;
	/* 宽度 */
	height: 8px;
	/* 高度 */
	border: 0;
	/* 边框重置 */
	opacity: 1;
	/* 不透明 */
	background: var(--color-white-80);
	/* 背景色 */
	cursor: pointer;
	/* 指针样式 */
	transition: all .2s linear;
	/* 过渡效果 */
}

/* 视频样式 */
.video-container {
	position: relative;
}

.video-container #myVideo {
	width: 100%;
	height: 70vh;
	max-width: 100%;
	min-width: 100%;
	position: relative;
	filter: blur(.5px);
}

.video-container .video-bg {
	position: relative;
}

.video-container .video-bg::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 25%);
	pointer-events: none;
	/* 防止覆盖点击事件 */
}

/* 图片样式 */
.img-container {
	position: relative;
}

.home-header-img {
	position: relative;
	width: 100%;
	height: 70vh;
	overflow: hidden;
}

.home-header-img img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nav-fixed .home-header-img img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

@media (max-width: 768.9px) {
	.home-header-img {
		position: relative;
		width: 100%;
		height: 50vh;
	}
}

/* ==============================================
   文章页样式
   ============================================== */

/* 文章头部背景 */
.single-page .article-header-bg {
	display: flex;
	/* 弹性布局 */
	flex-flow: column;
	/* 垂直排列 */
	justify-content: flex-end;
	/* 底部对齐 */
	width: 100%;
	/* 100%宽度 */
	height: auto;
	/* 自动高度 */
	min-height: 70vh;
	/* 最小高度 */
	color: hsl(0deg 0% 100% / .9);
	/* 文字颜色 */
	text-shadow: 0.1em 0.1em var(--color-blue-20);
	/* 文字阴影 */
	padding-block: 0 1.5em;
	/* 内边距 */
	margin: 0;
	/* 外边距重置 */
	gap: 1.5em;
	/* 子元素间距 */
	overflow: hidden;
	/* 隐藏溢出 */
}

/* 文章头部背景图 */
.single-page .article-header-bg figure {
	position: fixed;
	/* 固定定位 */
	inset: 0;
	/* 全屏 */
	background: #0000;
	/* 透明背景 */
	overflow: hidden;
	/* 隐藏溢出 */
	z-index: 0;
	/* 底层 */
}

/* 文章头部遮罩效果 */
.single-page .article-header-bg figure:after {
	content: "";
	/* 伪元素 */
	background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) var(--layout-nav-height), rgba(0, 0, 0, 0) 50%, #222 calc(100% - 4em));
	/* 渐变 */
	position: absolute;
	/* 绝对定位 */
	top: 0;
	/* 顶部对齐 */
	right: 0;
	/* 右侧对齐 */
	bottom: 0;
	/* 底部对齐 */
	left: 0;
	/* 左侧对齐 */
	pointer-events: none;
	/* 禁用指针事件 */
	mask: linear-gradient(#000, rgba(0, 0, 0, 0) var(--layout-nav-height), #000 50vh);
	/* 遮罩 */
	-webkit-mask: linear-gradient(#000, rgba(0, 0, 0, 0) var(--layout-nav-height), #000 50vh);
	/* 兼容遮罩 */
	backdrop-filter: blur(20px);
	/* 背景模糊 */
	-webkit-backdrop-filter: blur(20px);
	/* 兼容背景模糊 */
}

/* 文章头部图片 */
.single-page .article-header-bg figure img {
	width: 100%;
	/* 100%宽度 */
	height: 100%;
	/* 100%高度 */
	opacity: 0;
	/* 初始透明 */
	object-fit: cover;
	/* 覆盖填充 */
	vertical-align: middle;
	/* 垂直对齐 */
	transform-origin: top;
	/* 变换原点 */
	transform: scale(1.1);
	/* 缩放 */
	transition: opacity .5s var(--easing-bounce), transform 1s var(--easing-bounce);
	/* 过渡效果 */
}

.nav-fixed .article-header-bg figure img {
	transform: scale(1.1) !important;
}

/* 加载完成的图片 */
.single-page .article-header-bg figure img.lazy-loaded {
	opacity: 1;
	/* 不透明 */
	transform: none;
	/* 无变换 */
	animation: none;
	/* 无动画 */
}

/* 文章标题组 */
.single-page .article-header-bg hgroup {
	display: flex;
	/* 弹性布局 */
	flex-flow: column;
	/* 垂直排列 */
	align-items: center;
	/* 水平居中 */
	position: relative;
	/* 相对定位 */
	gap: 1em;
	/* 子元素间距 */
	padding: var(--space-md);
	/* 内边距 */
	font-size: .9em;
	/* 字体大小 */
	animation: opacity .75s var(--easing-bounce) .7s 1 backwards;
	/* 动画 */
}

.nav-fixed .article-header-bg figure img~.loading,
.single-page .article-header-bg figure img.lazy-loaded~.loading {
	transform: var(--trfm);
	transform-origin: bottom;
	opacity: 0;
	visibility: hidden;
}

.single-page .article-header-bg .loading {
	--trfm: scale(1.1);
	position: fixed;
	display: flex;
	z-index: 2;
	align-items: center;
	justify-content: center;
	font-size: .6em;
	inset: var(--layout-nav-height) 0 auto;
	width: fit-content;
	height: 3em;
	padding: 0.5em 1em;
	margin: auto;
	border-radius: 2em;
	gap: 0.5em;
	backdrop-filter: blur(10px) brightness(.8);
	-webkit-backdrop-filter: blur(10px) brightness(.8);
	animation-delay: 1.5s;
	transition: .5s;
}

.single-page .article-header-bg .loading::before {
	content: "";
	border-top: 2px solid;
	border-radius: 50%;
	width: 1em;
	aspect-ratio: 1;
	animation: rotate 2s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(1turn);
	}
}

/* 文章标题 */
.single-page .article-header-bg h1 {
	z-index: 1;
	/* 层级 */
	position: relative;
	/* 相对定位 */
	margin: 2rem auto;
	/* 外边距 */
	font-weight: 600;
	/* 字体粗细 */
	max-width: 70vh;
	/* 最大宽度 */
	font-size: clamp(1.5rem, 2vmax, 2rem);
	/* 响应式字体 */
}

/* 元信息栏 */
.single-page .article-header-bg .meta-bar {
	display: flex;
	/* 弹性布局 */
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 1.5rem;
	/* 子元素间距 */
	font-size: 0.9rem;
	/* 字体大小 */
	flex-wrap: nowrap;
	/* 禁止换行 */
}

@media (max-width: 768.9px) {
	.single-page .article-header-bg hgroup {
		align-items: normal !important;
	}

	.single-page .article-header-bg .meta-bar {
		flex-wrap: nowrap;
		scroll-snap-type: x mandatory;
		overflow: scroll visible;
		scrollbar-width: none;
	}
}

/* 单个元信息项 */
.single-page .article-header-bg .meta-item {
	color: var(--color-background);
	/* 白色文字 */
	opacity: 0.8;
	/* 半透明 */
	min-width: 8rem;
	/* 最小宽度 */
	transition: var(--transition-medium);
	/* 过渡效果 */
	position: relative;
	/* 相对定位 */
	display: flex;
	/* 弹性布局 */
	flex-flow: column;
	/* 垂直排列 */
	align-items: center;
	/* 水平居中 */
	padding: 1em;
	/* 内边距 */
	gap: 1em;
	/* 子元素间距 */
	border-radius: 10px;
	/* 圆角 */
	line-height: 1;
	/* 行高 */
	flex: 1 0 auto;
	/* 弹性属性 */
	scroll-snap-align: start;
	/* 滚动吸附 */
	background: rgb(255 255 255 / 5%);
	/* 半透明背景 */
	box-shadow: var(--shadow-default);
}

/* 元信息图标 */
.single-page .article-header-bg .meta-icon {
	width: 16px;
	/* 宽度 */
	height: 16px;
	/* 高度 */
	fill: currentColor;
	/* 填充色 */
	opacity: 0.7;
	/* 半透明 */
}

/* 元信息项悬停效果 */
.single-page .article-header-bg .meta-item:hover {
	opacity: 1;
	/* 不透明 */
	transform: translateY(-1px);
	/* 上移 */
}

/* 元信息图标悬停效果 */
.single-page .article-header-bg .meta-item:hover .meta-icon {
	opacity: 1;
	/* 不透明 */
	animation: icon-pulse 0.6s ease;
	/* 脉冲动画 */
}

/* 图标脉冲动画 */
@keyframes icon-pulse {
	0% {
		transform: scale(1);
	}

	/* 原始大小 */
	50% {
		transform: scale(1.2);
	}

	/* 放大 */
	100% {
		transform: scale(1);
	}

	/* 恢复 */
}

/* 文章页波浪效果调整 */
.single-page .waves-box {
	bottom: -31px;
	/* 底部位置 */
	animation: opacity .5s 1s var(--easing-bounce) backwards;
	/* 动画 */
}

/* 文章内容通用样式 */
.article-wrapper {
	margin-bottom: 5rem;
}

.article-wrapper>* {
	min-width: 0;
	/* 最小宽度 */
	max-width: var(--layout-max-article-width);
	/* 最大宽度 */
	width: 100%;
	/* 100%宽度 */
	margin: var(--space-md) auto;
	/* 外边距 */
	color: var(--color-text-primary);
	/* 文字颜色 */
	line-height: 2;
	/* 正文行高 */
}

/* 透明度动画 */
@keyframes opacity {
	0% {
		opacity: 0;
	}

	/* 完全透明 */
	100% {
		opacity: 1;
	}

	/* 完全不透明 */
}

/* 文本布局元素间距 */
:where(.text-layout)> :where(p, pre, address, blockquote, figure, details, iframe, audio, video, h1, h2, h3, h4, h5, h6, ul, ol) {
	margin-block: 1em;
	/* 块级外边距 */
}

/* ==============================================
   首页分类普通文章样式
   ============================================== */

.category-section {
	margin: var(--space-lg) auto;
	background: #fff;
	border-radius: 10px;
	padding: var(--space-lg);
	overflow: hidden;
}

.category-section .category-header {
	margin-bottom: var(--space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.category-section .category-title {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	position: relative;
	margin: 0;
	font-size: 1.4rem;
	color: var(--color-blue-50);
}

.category-section .category-header h2:before {
	content: attr(id);
	color: var(--color-blue-50);
	font-size: 15rem;
	font-weight: bold;
	letter-spacing: 15px;
	opacity: .1;
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewX(-15deg);
	z-index: 0;
	font-family: fantasy;
}

.read-more-container {
	display: flex;
	justify-content: flex-end;
}

.category-section .category-more {
	margin-top: 2rem;
	color: var(--color-background-blue);
	text-align: end;
	font-size: .9em;
}

.category-section .category-more a {
	z-index: 1;
}

.category-section .category-more {
	position: relative;
	padding: .5rem var(--space-md);
	transition: all 0.2s ease;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .3rem;
	line-height: 2;
}

.category-section .category-more:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-radius: 50px;
	background: var(--color-blue-5);
	width: 45px;
	height: 45px;
	transition: all 0.3s ease;
}

.category-section .category-more svg {
	position: relative;
	top: 0;
	margin-left: 10px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: var(--color-background-blue);
	stroke-width: 2;
	transform: translateX(-5px);
	transition: all 0.3s ease;
}

.category-section .category-more:hover:before {
	width: 100%;
}

.category-section .category-more:hover svg {
	transform: translateX(0);
}

.category-section .category-more:active {
	transform: scale(0.95);
}

.category-section .category-meta {
	display: flex;
	gap: var(--space-sm)
}

.category-section .category-description {
	padding-top: var(--space-sm);
	color: var(--color-text-secondary);
	font-size: 0.75rem;
	line-height: 1.6;
	z-index: 1;
}

.post-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.category-section .glassmorphism {
	--line-clamp: 2;
	position: relative;
	display: flex;
	flex-flow: column;
	flex: 1;
	min-width: 18rem;
	border-radius: 10px;
	background: var(--color-white-15);
	box-shadow: var(--shadow-light);
	overflow: hidden;
}

.category-section .glassmorphism .post-thumbnail-container {
	aspect-ratio: 1;
	min-height: 13rem;
	max-height: 15rem;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-background);
	transition: 1s;
}

.dynamic-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-accent-blue) 50%, var(--color-background-blue) 50%);
	background-size: 200% 200%;
	/* 初始大小 */
	background-position: 0% 0%;
	/* 初始位置 */
	animation: gradientMove 10s infinite alternate;
	transition: all 0.5s ease;
}

/* 定义渐变移动动画 */
@keyframes gradientMove {
	0% {
		background-position: 20% 30%;
		/* 从左上角开始 */
	}

	100% {
		background-position: 80% 70%;
		/* 移动到中心位置 */
	}
}

img.lazy-loaded~.dynamic-background {
	transform-origin: bottom;
	opacity: 0;
	visibility: hidden;
}

.category-section .glassmorphism .post-thumbnail-container img.lazy-loading {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}

.category-section .glassmorphism .post-thumbnail-container img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.85) blur(.5px);
	transition: 1s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

.category-section .glassmorphism:hover .post-thumbnail-container img {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	filter: none;
}

/* 图片按钮 */
.category-section .glassmorphism .post-thumbnail-container .post-tag {
	position: absolute;
	bottom: 2.5rem;
	right: .5rem;
	line-height: 1;
	border-radius: .2em;
	padding: .2em .5em;
	color: var(--color-background);
	font-weight: 500;
	transition: .5s;
	opacity: .5;
}

.category-section .glassmorphism .post-thumbnail-container .post-tag svg {
	display: flex;
}

.category-section .glassmorphism:hover .post-thumbnail-container .post-tag {
	background: var(--color-white-15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 1;
}

.category-section .glassmorphism .post-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	place-content: space-between;
	flex: auto;
	gap: 1em;
	padding: 1em;
	border-radius: 10px;
	margin-top: -2rem;
	border-top: thin solid var(--color-blue-5);
	background: var(--color-white-80);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.category-section .glassmorphism .post-content .post-meta {
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--color-text-secondary);
	font-size: .75em;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.category-section .glassmorphism .post-content .post-meta>* {
	display: flex;
	align-items: center;
	gap: .3rem;
}

.category-section .glassmorphism .post-content .post-meta svg {
	height: 1.2em;
	width: 1.2em;
}

.category-section .glassmorphism .post-content .post-title {
	color: var(--color-text-primary);
	font-size: .95em;
	line-height: 1.8;
}

.category-section .glassmorphism .post-content .post-excerpt {
	font-size: .6em;
	color: var(--color-text-secondary);
	line-height: 2;
}

/* ==============================================
   首页分类普通书籍样式
   ============================================== */

.book-card {
	--line-clamp: 2;
	position: relative;
	display: flex;
	flex-flow: column;
	flex: 1;
	min-width: 18rem;
	border-radius: 10px;
	background: var(--color-white-15);
	box-shadow: var(--shadow-light);
	overflow: hidden;
}

.book-card .book-cover:hover img {
	-webkit-transform: scale(1.38);
	transform: scale(1.38);
	filter: none;
}

.book-card .book-cover:hover~.book-content {
	opacity: 0;
	transition: .5s ease;
}

/* 书籍封面 */
.book-card .book-cover {
	aspect-ratio: 1;
	min-height: 18rem;
	max-height: 20rem;
	width: 100%;
	opacity: 1;
	position: relative;
	transition: opacity .5s;
}

.book-card .book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 保持图片比例，填充容器 */
	object-position: center;
	/* 居中对齐 */
	filter: brightness(0.9);
	will-change: transform;
	transition: 0.5s ease;
}

/* 书籍信息区 */
.book-card .book-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	place-content: space-between;
	flex: auto;
	gap: 1em;
	padding: 1em;
	border-radius: 10px;
	margin-top: -10rem;
	border-top: thin solid var(--color-blue-5);
	background: var(--color-white-80);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: .5s;
}

/* 书名与作者 */
.book-card .book-title {
	color: var(--color-text-primary);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.5;
}

.book-card .book-content .book-author {
	color: var(--color-text-secondary);
	font-size: 0.8rem;
	display: flex;
	gap: var(--space-sm);
}

/* 元数据信息（字数/版权/积分） */
.book-card .book-content .book-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}

.book-card .book-content .book-meta div {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.book-card .book-content .book-meta svg {
	height: 1.2em;
	width: 1.2em;
}

/* 版权转化状态 */
.book-card .book-content .copyright-status {
	padding: 0.2rem var(--space-sm);
	font-size: 0.7em;
	text-transform: uppercase;
	border-radius: 3px;
	background: var(--color-blue-5);
	color: var(--color-blue-50);
}

.book-card .book-content .post-excerpt {
	font-size: .6em;
	color: var(--color-text-secondary);
	line-height: 2;
}

/* ==============================================
   首页分类普通动态样式
   ============================================== */
.say-card {
	position: relative;
	display: flex;
	flex-flow: column;
	flex: 1;
	min-width: 18rem;
	border-radius: 10px;
	background: var(--color-white-15);
	box-shadow: var(--shadow-light);
	overflow: hidden;
}

.say-card .say-header {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 5rem;
	overflow: hidden;
	border-radius: 10px;
}

.say-card .say-header .say-cover {
	width: 100%;
	height: 100%;
	position: relative;
	max-height: 5rem;
	min-height: 5rem;
	max-width: 5rem;
	min-width: 5rem;
	border-radius: 10px;
	overflow: hidden;
}

.say-card .say-header .say-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	border-radius: 10px;
	filter: brightness(0.85) blur(.5px);
	transition: 1s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

.say-card:hover .say-header .say-cover img {
	filter: none;
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
}

.say-card .say-header .say-content {
	gap: var(--space-sm);
	display: flex;
	flex-wrap: wrap;
	color: var(--color-text-primary);
	padding: var(--space-md);
	margin-left: -2rem;
	border-left: thin solid var(--color-blue-5);
	background: var(--color-white-80);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
}

.say-card .say-header .say-content .say-title {
	font-size: .95em;
}

.say-card .say-header .say-content .say-excerpt {
	font-size: .65em;
	color: var(--color-text-secondary);
}

.say-card .say-footer {
	gap: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	color: var(--color-text-secondary);
	padding: var(--space-md);
	align-items: center;
	line-height: 1;
	font-size: .65em;
	justify-content: flex-end;
}

.say-card .say-footer>* {
	display: flex;
	align-items: center;
	gap: .2rem;
}

/* ==============================================
   分类页面默认样式
   ============================================== */
/*分类页面导航字体颜色*/
.category-page .hero-nav {
	color: var(--color-text-primary);
}

.category-page .container {
	gap: var(--space-md);
	position: relative;
	margin-top: 4rem !important;
	margin-bottom: 0;
	padding: 0 var(--space-md);
	display: grid;
	grid: minmax(calc(100vh - 4rem - var(--space-md)), max-content) / clamp(15em, 15vw, 15rem) 1fr;
}

.category-page .container .category-header {
	min-width: 15rem;
	max-width: 15rem;
	position: sticky;
	top: 4rem;
	height: calc(100vh - 10rem);
	display: flex;
	align-items: center;
}

.category-page .container .category-header .category-header-content {
	position: relative;
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.category-page .container .category-header-content .category-title {
	font-size: 1.25em;
	color: var(--color-blue-80);
}

.category-page .container .category-header .num {
	font-size: .65em;
	position: absolute;
	padding: 0 1em;
	font-weight: 600;
	white-space: nowrap;
}

.category-page .container .category-header-content .category-description {
	font-size: .85em;
	color: var(--color-text-primary);
}

.category-page .container .category-article-list {
	display: grid;
	grid: auto-flow dense / repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--space-lg) 1.5rem;
	align-content: center;
	position: relative;
	padding: var(--space-md) 0;
}

.category-page .container .category-article-list .category-card {
	--line-clamp: 2;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: var(--space-md);
	margin-top: var(--space-md);
	border-radius: 10px;
	position: relative;
	outline: thin solid var(--color-blue-5);
	background: var(--color-white-80);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.category-page .container .category-article-list .category-card .category-thumbnail-container {
	aspect-ratio: 1;
	min-height: 10rem;
	max-height: 10rem;
	width: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin-top: -3rem;
	background: var(--color-background);
	transition: 1s;
	box-shadow: var(--shadow-light);
	outline: thin solid var(--color-blue-5);
}

.category-page .container .category-article-list .category-card .category-thumbnail-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.85) blur(.5px);
	transition: 1s;
	border-radius: 10px;
}

.category-page .container .category-article-list .category-card .category-thumbnail-container img.lazy-loaded~.dynamic-background {
	transform-origin: bottom;
	opacity: 0;
	visibility: hidden;
}

.category-page .container .category-article-list .category-card:hover .category-thumbnail-container img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	filter: none;
}

.category-page .container .category-article-list .category-card .category-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	place-content: space-between;
	flex: auto;
	gap: var(--space-md);
	padding-top: var(--space-md);
}

.category-page .category-article-list .category-card .category-content .category-title {
	color: var(--color-text-primary);
	font-size: .95em;
	line-height: 1.8;
}

.category-page .category-article-list .category-content .category-excerpt {
	font-size: .6em;
	color: var(--color-text-secondary);
	line-height: 2;
}

.category-page .category-article-list .category-content .post-meta {
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--color-text-secondary);
	font-size: .75em;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.category-page .category-article-list .category-content .post-meta>* {
	display: flex;
	align-items: center;
	gap: .3rem;
}

.category-page .container .footer-nav {
	z-index: 8;
	display: flex;
	justify-content: center;
	max-width: 15rem;
	width: 100%;
	position: sticky;
	bottom: var(--space-md);
	margin-bottom: var(--space-lg);
}

.category-page .container .footer-nav ol {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	align-items: center;
}

.category-page .container .footer-nav ol li.prev,
.category-page .container .footer-nav ol li.next {
	padding: .2rem;
	background: var(--color-blue-5);
	border-radius: 50%;
	color: var(--color-blue-80);
	display: flex;
}

.category-page .container .footer-nav ol li:not([class]) {
	padding: .4rem 1em;
	background: var(--color-white-80);
	border-radius: 50%;
	display: flex;
	font-size: .6em;
	outline-offset: 1em;
	outline: thin solid #0000;
	transition: .5s;
}

.category-page .container .footer-nav ol li:not([class]):hover {
	color: var(--color-blue-50);
	background: var(--color-blue-5);
	outline-color: hsl(var(--subs-color) / .8);
	outline-offset: 0;
}

.category-page .container .footer-nav ol li.current {
	padding: .4rem 1em;
	background: var(--color-white-80);
	border-radius: 50%;
	display: flex;
	font-size: .6em;
	color: var(--color-blue-50);
	background: var(--color-blue-5);
	outline-color: hsl(var(--subs-color) / .8);
	outline-offset: 0;
}

.category-page .container .footer-nav ol li>* {
	display: flex;
}
/* ==============================================
   分类相册样式
   ============================================== */
.category-page .container .category-article-list.category-photos{
    display: block;
}
.container .category-article-list.category-photos .photos-time{
    display: flex;
    gap: var(--space-sm);
    font-size: .9em;
    margin-bottom: var(--space-sm);
}
.container .category-article-list.category-photos .photos-time .left{
    color: var(--color-text-primary);
    font-size: 1.8em;
}
.container .category-article-list.category-photos .photos-time .right{
    display: flex;
    flex-direction: column;
    font-size: .6em;
    gap: .2rem;
    color: var(--color-text-primary);
}
.photos-article{
    display: grid;
    grid: auto-flow dense / repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap:var(--space-md);
    align-content: center;
    position: relative;
    padding: var(--space-md) 0;
}
@media (max-width: 768.9px) {
    .photos-article{
        grid: auto-flow dense / repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
    }
    .photos-article .post-content {
        max-width: 10rem;
    }
}
.photos-article .post-content {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    max-width: 25rem;
    min-width: 20rem;
    width: 100%;
}
.photos-article .post-content img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.category-page .container .category-article-list.category-photos li{
    margin-bottom: 3rem;
}



/* ==============================================
   手机端分类样式
   ============================================== */
@media (max-width: 768.9px) {
	.category-page .container {
		display: block !important;
	}

	.category-page .container .category-header {
		min-width: auto;
		max-width: none;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		position: unset;
	}

	.category-page .container .category-header .category-header-content {
		display: flex;
		margin: var(--space-md) 0;
		margin-bottom: var(--space-lg);
		flex-direction: column;
		position: static;
	}

	.category-page .container .footer-nav {
		position: unset;
		margin: var(--space-lg) 0;
		width: 100%;
		max-width: none;
	}
}

/* ==============================================
   全局底部样式
   ============================================== */
.warm-footer {
	position: relative;
	padding: 2rem 0;
	color: var(--color-white-80);
	overflow: hidden;
	background: var(--color-background-blue);
}

.warm-footer .footer-glass {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: -1;
}

.warm-footer .footer-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.warm-footer .footer-column {
	background: var(--color-white-15);
	border-radius: 12px;
	padding: 1.5rem;
	backdrop-filter: blur(5px);
}

.warm-footer .memory-header,
.warm-footer .random-header,
.warm-footer .friends-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.warm-footer .icon-calendar,
.warm-footer .icon-teacup,
.warm-footer .icon-letter {
	width: 24px;
	height: 24px;
	fill: var(--color-blue-50);
}

.warm-footer .memory-days {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	margin-bottom: 1.5rem;
	font-size: 1.1rem;
}

.warm-footer .day-count {
	font-size: 1.8rem;
	font-weight: 500;
	color: var(--color-blue-80);
}

.warm-footer .memory-list {
	list-style: none;
	padding: 0;
}

.warm-footer .memory-list li {
	display: flex;
	align-items: center;
	gap:var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: 1px dashed var(--color-blue-5);
}

.warm-footer .icon-bookmark {
	width: 18px;
	height: 18px;
	fill: var(--color-blue-50);
}

.warm-footer .warm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	background: var(--color-blue-80);
	color: var(--color-white-80);
	border: none;
	padding: 0.75rem 1.25rem;
	border-radius: 10px;
	font-size: var(--space-md);
	width: 100%;
	cursor: pointer;
	transition: all 0.3s ease;
}

.warm-footer .warm-button svg {
	fill: var(--color-white-80);
}

.warm-footer .random-preview {
	margin-top: var(--space-md);
	padding: var(--space-md);
	font-size: .9em;
	background: var(--color-white-15);
	border-radius: 10px;
}

.warm-footer .random-preview .post-description {
	--line-clamp: 2;
	font-size: .6em;
	color: var(--color-white-80);
	line-height: 1.8;
}

.warm-footer .random-preview a {
	font-size: .8em;
	color: var(--color-white-80);
	text-align: end;
	font-style: italic;
	line-height: 2;
	margin: .5em 0;
}

.warm-footer .friends-list {
	display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0;
    grid: auto / repeat(2, 1fr);
    z-index: 1;
    position: relative;
}

.warm-footer .friends-list a{
    position: relative;
}

.warm-footer .friends-list a::after{
	content: attr(id);
    font-size: .6em;
    opacity: .6;
    margin-left: var(--space-sm);
}

.warm-footer .friend-link:hover {
	color: var(--color-blue-80);
}

.warm-footer .footer-sign {
	text-align: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	font-size: .75em;
	border-top: 1px solid var(--color-blue-5);
}

.warm-footer .icon-flower {
	width: 24px;
	height: 24px;
	fill: var(--color-blue-50);
	margin-bottom: var(--space-sm);
}

.footer-bottom {
	padding: var(--space-md);
	font-size: .9em;
	line-height: 1;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	color: var(--color-text-secondary);
	background: var(--color-background);
}

.elegant-footer {
	font-size: 0.9em;
	gap: var(--space-sm);
	display: grid;
	color: var(--color-text-secondary);
}

.footer-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.copyright {
	font-weight: 500;
}

.divider {
	opacity: 0.5;
	padding: 0 0.25rem;
}

.theme-info {
	position: relative;
	padding-left: 1.25rem;
}

.theme-info::before {
	content: "🎨";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-60%);
}

.theme-name {
	font-style: italic;
	color: var(--color-accent-blue);
	padding: 0 .5em;
}

.footer-poem {
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--color-text-secondary);
}

.footer-poem p {
	margin: 0;
	position: relative;
}

.footer-poem p::before,
.footer-poem p::after {
	content: "“";
	opacity: 0.3;
	padding: 0 0.25rem;
	color: var(--color-accent-blue);
}

.footer-bottom .right a {
	cursor: pointer;
	display: flex;
	flex-flow: nowrap row;
	align-items: center;
	white-space: nowrap;
	gap: 0 0.3em;
	line-height: 1;
	filter: grayscale(1) opacity(.5);
	transition: .5s;
}

.footer-bottom .right a img {
	width: auto;
	height: 1.5em;
}

.footer-bottom .right a:hover {
	filter: grayscale(0) opacity(1);
}

@media (max-width: 768.9px) {
	.footer-bottom {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 768.9px) {
	.category-section {
		padding: var(--space-md);
	}

	.post-scroll-container {
		overflow: scroll visible;
		scrollbar-width: none;
		display: flex;
		align-items: normal !important;
	}

	.post-row {
		flex-wrap: nowrap;
	}
}

/* ==============================================
   首页相册样式
   ============================================== */
.postlist_album {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
}

.postlist_album img {
	aspect-ratio: 1;
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	object-fit: cover;
}

.postlist_album .postlist_gallery {
	position: relative;
	overflow: hidden;
}

.postlist_album .postlist_gallery .mask {
	position: absolute;
	display: flex;
	background: rgb(0 0 0 / 60%);
	inset: 0;
	color: #fff;
	font-size: 2rem;
	border-radius: var(--space-sm);
	justify-content: center;
	align-items: center;
}

.postlist_album .postlist_gallery .mask svg {
	fill: #fff;
	width: 2rem;
}

.postlist_abstract {
	line-height: 2rem;
	min-height: 4rem;
	word-break: break-all;
	font-size: var(--space-md);
	margin: var(--space-md) var(--space-md) 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
}

.postlist_abstract_three {
	-webkit-line-clamp: 3;
	margin: 0;
	border-radius: var(--space-sm);
	word-break: break-word;
}

.postlist cat_article_video video {
	width: auto;
	max-width: 100%;
}


.postlist_album[num='1'] {
	grid-template-columns: repeat(1, 1fr);
}

.postlist_album[num='1'] img {
	aspect-ratio: unset;
}

.postlist_album[num='2'],
.postlist_album[num='4'] {
	grid-template-columns: repeat(2, 1fr);
}

.postlist_album[num='3'],
.postlist_album[num='6'],
.postlist_album[num='8'] {
	grid-template-columns: repeat(3, 1fr);
}

.postlist_album[num='5'] {
	grid-template-columns: repeat(6, 1fr);
}

.postlist_album[num='7'] {
	grid-template-columns: repeat(4, 1fr);
}

.postlist_album[num='3'] .postlist_gallery:nth-child(1) {
	grid-area: 1 / 1 / 3 / 3;
}

.postlist_album[num='3'] .postlist_gallery:nth-child(2) {
	grid-area: 1 / 3 / 2 / 4;
}

.postlist_album[num='3'] .postlist_gallery:nth-child(3) {
	grid-area: 2 / 3 / 3 / 4;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(1) {
	grid-area: 1 / 1 / 5 / 5;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(2) {
	grid-area: 1 / 5 / 3 / 7;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(3) {
	grid-area: 3 / 5 / 5 / 7;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(4) {
	grid-area: 5 / 1 / 7 / 4;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(5) {
	grid-area: 5 / 4 / 7 / 7;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(4) img {
	aspect-ratio: 1.5;
	height: auto;
}

.postlist_album[num='5'] .postlist_gallery:nth-child(5) img {
	aspect-ratio: 1.5;
	height: auto;
}

.postlist_album[num='6'] .postlist_gallery:nth-child(1) {
	grid-area: 1 / 1 / 3 / 3;
}

.postlist_album[num='6'] .postlist_gallery:nth-child(2) {
	grid-area: 1 / 3 / 2 / 4;
}

.postlist_album[num='6'] .postlist_gallery:nth-child(3) {
	grid-area: 2 / 3 / 3 / 4;
}

.postlist_album[num='6'] .postlist_gallery:nth-child(4) {
	grid-area: 3 / 1 / 4 / 2;
}

.postlist_album[num='6'] .postlist_gallery:nth-child(5) {
	grid-area: 3 / 2 / 4 / 3;
}

.postlist_album[num='6'] .postlist_gallery:nth-child(6) {
	grid-area: 3 / 3 / 4 / 4;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(1) {
	grid-area: 1 / 1 / 3 / 3;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(2) {
	grid-area: 1 / 3 / 3 / 5;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(3) {
	grid-area: 3 / 1 / 5 / 3;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(4) {
	grid-area: 3 / 3 / 4 / 4;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(5) {
	grid-area: 3 / 4 / 4 / 5;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(6) {
	grid-area: 4 / 3 / 5 / 4;
}

.postlist_album[num='7'] .postlist_gallery:nth-child(7) {
	grid-area: 4 / 4 / 5 / 5;
}

.postlist_album[num='8'] .postlist_gallery:nth-child(8) {
	grid-area: 3 / 2 / 4 / 4;
}

.postlist_album[num='8'] .postlist_gallery:nth-child(8) img {
	aspect-ratio: 3;
}

.category-section .glassmorphism .album-thumbnail-container {
	border-radius: 10px;
	overflow: hidden;
    min-height: 20rem;
    max-height: 20rem;
	transition: 1s;
	position: relative;
	background: #000;
}
.album-thumbnail-container img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    transition: 1s;
}
.album-thumbnail-container:hover img{
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    filter: brightness(0.85) blur(.5px);
}
.album-thumbnail-container b{
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: var(--color-white-80);
    padding: .2em var(--space-md);
    border-radius: 2em;
    font-size: .65em;
    align-items: center;
    background: var(--color-white-15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.album-thumbnail-container .album-title{
    position: absolute;
    font-size: .9em;
    color: var(--color-white-80);
    bottom: .5rem;
    left: .5rem;
    opacity: 0;
    transition: .5s;
}
.album-thumbnail-container:hover .album-title{
    opacity:1;
}
.album-thumbnail-container .post-meta{
    position: absolute;
    top: .5rem;
    left: .5rem;
    opacity: 0;
    transition: .5s;
    display: flex;
    gap: .5rem;
    font-size: .6em;
    color: var(--color-white-80);
    align-items: center;
}
.album-thumbnail-container .post-meta > *{
    display: flex;
    align-items: center;
    line-height: 1;
    gap: .3rem;
}
.album-thumbnail-container:hover .post-meta{
    opacity:1;
}
/* ==============================================
   分类页多图样式
   ============================================== */
.category-page .container .category-article-list .category-card .category-album-container {
	width: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin-top: -3rem;
	background: var(--color-background);
	transition: 1s;
	box-shadow: var(--shadow-light);
	outline: thin solid var(--color-blue-5);
	display: flex;
	align-items: center;
}

.category-page .container .category-article-list .category-card .category-album-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	place-content: space-between;
	flex: auto;
	gap: var(--space-md);
	padding-top: var(--space-md);
}

.category-page .container .category-article-list .category-card .postlist_album {
	aspect-ratio: 1;
	min-height: 10rem;
	max-height: 16rem;
	width: 100%;
	position: relative;
	transition: 1s;
}

.category-page .container .category-article-list .category-card .postlist_album .photo-count {
	position: absolute;
	bottom: 0;
	display: flex;
	color: var(--color-white-80);
	padding: .2em var(--space-md);
	border-radius: 2em;
	font-size: .65em;
	align-items: center;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--color-white-15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.category-page .container .category-article-list .category-card .postlist_album img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.85) blur(.5px);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	transition: 1s;
}

.category-page .container .category-article-list .category-card .postlist_album img:hover {
	-webkit-transform: scale(1);
	transform: scale(1);
	filter: none;
}

.category-page .category-article-list .category-card .category-album-content .category-title {
	color: var(--color-text-primary);
	font-size: .95em;
	line-height: 1.8;
}

/* ==============================================
   全站评论样式
   ============================================== */
.single-page .container {
	width: 100%;
	margin: 0;
	padding: var(--space-md);
	background: var(--color-background);
	position: relative;
	min-height: 30vh;
	animation: opacity .5s 1s var(--easing-bounce) backwards;
}

.comments-wrapper .comments-main {
	min-width: 0;
	max-width: var(--layout-max-article-width);
	width: 100%;
	margin: var(--space-md) auto;
	color: var(--color-text-primary);
	line-height: 2;
}

.comment-main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

/* 输入区域 */
.comment-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.field-row {
	display: flex;
	gap: 12px;
}

.field-group {
	flex: 1;
}

.form-input {
	width: 100%;
	padding: .2em var(--space-sm);
	color: var(--color-text-secondary);
	outline: 1px solid var(--color-blue-20);
	border-radius: 10px;
	font-size: 14px;
	background: none;
	transition: all 0.2s ease;
}

.admin-info {
	font-size: .6em;
	color: var(--color-text-secondary);
}

.admin-link {
	padding: 0 .5em;
	color: var(--color-background-blue);
	text-decoration: none;
}

.admin-link:hover {
	text-decoration: underline;
}

/* 评论编辑器 */
.comment-textarea {
	width: 100%;
	padding: .2em var(--space-sm);
	color: var(--color-text-secondary);
	outline: 1px solid var(--color-blue-20);
	border-radius: 10px;
	font-size: 14px;
	min-height: 120px;
	border-radius: 10px;
	line-height: 1.6;
	resize: vertical;
	background: none;
	transition: all 0.2s ease;
}

/* 底部区域 */
.respond .comment-footer {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
}

.respond .comment-footer button#cancel-comment-reply-link {
	padding: .5em 1.5em;
	color: var(--color-text-secondary);
	border: none;
	border-radius: 5em;
	font-size: .6em;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* 提交按钮 */
.comment-footer .submit-btn {
	position: relative;
	padding: .5em 1.5em;
	color: var(--color-background-blue);
	border: none;
	border-radius: 5em;
	font-size: .6em;
	cursor: pointer;
	background: none;
	transition: all 0.2s ease;
}

.comment-footer .submit-btn:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-radius: 50px;
	background: var(--color-blue-5);
	width: 35px;
	height: 35px;
	transition: all 0.3s ease;
}

.comment-footer .submit-btn:hover:before {
	width: 100%;
}

/* 响应式设计 */
@media (max-width: 768.9px) {
	.field-row {
		flex-direction: column;
		gap: var(--space-md);
	}

	.respond .comment-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}
}

.comments_lie {
	margin-top: var(--space-lg);
}

.comments_lie h3 {
	margin: 2rem 0;
	color: var(--color-text-primary);
	font-size: .9em;
}

.comment-list .comment-body {
	background: var(--color-white-80);
	padding: var(--space-md);
	border-radius: 10px;
	margin: var(--space-md) 0;
	outline: 1px solid var(--color-blue-5);
}

.comment-list .comment-body .comment-avatar {
	display: flex;
	gap: var(--space-sm);
	font-size: .8em;
	align-items: center;
	color: var(--color-text-primary);
}

.comment-list .comment-body .comment-avatar .parent {
	padding: .05rem var(--space-sm);
	background: var(--color-background);
	border-radius: 2em;
	font-size: .6em;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.comment-list .comment-body .comment-avatar img {
	border-radius: 50%;
}

.comment-list .comment-body .comment-content .comment-text {
	color: var(--color-text-primary);
	font-size: .7em;
	padding: .5em 0;
}

.comment-list .comment-body .comment-content .comment-footer {
	color: var(--color-text-secondary);
	font-size: .6em;
	gap: var(--space-sm);
	display: flex;
	align-items: center;
}

.comment-list .comment-body .comment-content .comment-footer button {
	background: none;
}

.comment-children .comment-list>li {
	padding: 0;
	outline: none;
	background: none;
	padding-top: var(--space-md);
	border-radius: 0;
	margin-bottom: 0;
	border-top: 1px solid var(--color-blue-5);
}

.comments-main .comments_off {
	padding: var(--space-lg);
	background: var(--color-white-80);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	justify-content: center;
	font-size: .6em;
	margin: var(--space-lg) 0;
	color: var(--color-text-secondary);
}

.comments-main .comments_off svg {
	font-size: 2em;
}

.comments-main .page-navigator {
	display: none;
}

.comments-main #loading-spinner {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: center;
	margin: var(--space-lg) 0;
	font-size: .7em;
	color: var(--color-text-primary);
}

.comments-main #loading-spinner .spinner {
	position: relative;
}

.comments-main #loading-spinner .spinner::before {
	content: "";
	border-top: 2px solid;
	border-radius: 50%;
	width: 1em;
	display: block;
	aspect-ratio: 1;
	animation: rotate 2s linear infinite;
}

.comments-main .end {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-lg) 0;
	font-size: .6em;
	color: var(--color-text-secondary);
}

/* ==============================================
   文章内容样式
   ============================================== */
/* 图片排版 */
.text-layout .text-layout-img span{
    position: relative;
    border-radius: 10px;
    padding-bottom: 2rem;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}
.text-layout img {
	height: auto;
	cursor: zoom-in;
	border-radius: 10px;
	max-width: 100%;
	display: block;
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.text-layout .text-layout-img {
	position: relative;
	border-radius: 10px;
	margin: auto;
	display: flex;
	margin-bottom: var(--space-md);
    justify-content: center;
}
.text-layout .text-layout-img span b{
    position: absolute;
    bottom: 0;
    background: var(--color-white-15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    right: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
    font-size: .6em;
    padding: var(--space-sm);
    text-align: center;
    color: var(--color-text-primary);
}
/* 网易云样式 */
.text-layout media-embed iframe {
	width: 100%;
	transition: .5s .5s;
}

.text-layout .netease-music {
	width: 100%;
	height: 65px;
	padding: 0;
	overflow: hidden;
	margin: var(--space-md) 0;
}

/* qq音乐样式 */
.text-layout .qq-music {
	width: 100%;
	height: 66px;
	padding: 0;
	overflow: hidden;
	margin: var(--space-md) 0;
}

/* 视频 */
.text-layout .iframe-video {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
	aspect-ratio: 16/9;
	/* 竖屏视频比例 */
	background: #000;
	color: #fff;
	margin: 0 auto;
	overflow: hidden;
	margin: var(--space-md) 0;
}

.text-layout .iframe-video iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: inherit;
	align-self: flex-start;
	z-index: 1;
	position: relative;
}

/* 多媒体 */
.text-layout media-embed {
	display: block;
	position: relative;
	background: var(--color-background);
	border-radius: 10px;
	outline: thin solid var(--color-blue-5);
}

.text-layout media-embed:not(.loaded) iframe {
	opacity: 0;
	pointer-events: none;
}

.text-layout media-embed:not(.loaded) .loading {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .8em;
	width: fit-content;
	height: fit-content;
	line-height: 1;
	inset: 1em 0 auto;
	margin: auto;
	gap: .5em;
	color: var(--color-background-blue);
	padding: 1em 2em;
	border-radius: 2em;
	pointer-events: none;
	opacity: .5;
}

.text-layout media-embed:not(.loaded) .loading:before {
	content: "";
	border-top: 2px solid var(--color-background-blue);
	border-radius: 50%;
	width: 1em;
	aspect-ratio: 1;
	animation: rotate 2s linear infinite;
}

.text-layout media-embed.loaded .loading {
	display: none;
}

/* 链接样式 */
.text-layout a {
	color: var(--color-blue-50);
	text-decoration: underline dotted;
	transition: all 0.3s;
}

.text-layout a:hover {
	color: var(--color-accent-blue);
	text-decoration: underline;
}

/* 代码块 */
.text-layout pre {
	background: var(--color-blue-5);
	border-radius: 10px;
	padding: var(--space-md);
	overflow-x: auto;
	margin: 1.5em 0;
	color: var(--color-text-secondary);
}

.text-layout code {
	font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: var(--color-background-blue);
    background: var(--color-blue-50);
    padding: 0.2em 0.8em;
    line-height: 1;
    border-radius: 10px;
}

/* 引用样式 */
.text-layout blockquote {
	border-left: 3px solid var(--color-blue-50);
	padding-left: 1.2rem;
	margin: 1.5em 0;
	color: var(--color-blue-50);
	font-style: italic;
}
/* 加粗 */
.text-layout strong {
	font-weight: bold;
    color: var(--color-background-blue);
}

/* 段落优化 */
.text-layout > p {
	text-align: justify;
	/* 两端对齐 */
	text-justify: inter-ideograph;
	/* 优化中文排版 */
	hyphens: auto;
	/* 英文换行 */
	line-height: 2;
}

/* 标题层次 */

.text-layout h1 {
	font-size: 1.8rem;
	/* 约29px */
	color: #222;
	margin: 1.5em 0 1em;
	font-weight: 500;
	line-height: 1.4;
	position: relative;
	padding-bottom: 0.8rem;
	text-align: center;
}

.text-layout h1::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--color-blue-20), transparent);
}

.text-layout h2 {
	font-size: 1.5rem;
	margin: 2.5em 0 1em;
	font-weight: 600;
	border-left: 3px solid var(--color-blue-20);
	padding-left: var(--space-md);
}

.text-layout h3 {
	font-size: 1.3rem;
	margin: 2em 0 0.8em;
	font-weight: 500;
}

.text-layout del {
	color: var(--color-text-secondary);
}


/* 列表样式 */
.text-layout ul,
.text-layout ol {
	padding-left: 0;
	margin-bottom: 1.8em;
}

.text-layout li {
	margin-bottom: 0.6em;
	position: relative;
}

.text-layout ul li::before {
	content: "•";
	color: var(--color-blue-20);
	position: absolute;
	left: -1em;
}

/* 基础列表容器 */
.text-layout ol {
	list-style: none;
	counter-reset: moss-counter;
	margin: 1.5rem 0;
}

/* 列表项样式 */
.text-layout ol li {
	counter-increment: moss-counter;
	position: relative;
	margin-bottom: 1.2rem;
	padding-left: 2.5rem;
	line-height: 1.7;
}

/* 自定义数字样式 */
.text-layout ol li::before {
	content: counter(moss-counter);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8rem;
	height: 1.8rem;
	background: var(--color-blue-5);
	color: var(--color-accent-blue);
	border-radius: 50%;
	text-align: center;
	line-height: 1.8rem;
	font-size: 0.9rem;
	font-family: 'Noto Serif SC', serif;
}

/* 悬停效果 */
.text-layout ol li:hover::before {
	background: var(--color-blue-20);
	color: white;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

.article-wrapper .main-content .text-layout {
	font-size: .95em;
	color: var(--color-text-primary);
}

/* ==============================================
   页面样式
   ============================================== */
.single-page .article-header-bg.page-header-bg {
	min-height: 30vh;
}

/* ==============================================
   首页音乐样式
   ============================================== */
.music-card {
	position: relative;
	display: flex;
	flex-flow: column;
	flex: 1;
	min-width: 18rem;
	border-radius: 10px;
	background: var(--color-white-15);
	box-shadow: var(--shadow-light);
	overflow: hidden;
}

.music-card .music-card-header {
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.music-card .text-layout .qq-music,
.music-card .text-layout .netease-music {
	margin: 0;
}

.music-card .music-card-footer {
	gap: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	color: var(--color-text-secondary);
	padding: var(--space-md);
	align-items: center;
	line-height: 1;
	font-size: .65em;
	justify-content: flex-end;
}

/* ==============================================
   首页最新文章样式
   ============================================== */
.new-container{
    margin: var(--space-lg) auto;
    background: #fff;
    border-radius: 10px;
    padding: var(--space-lg);
    overflow: hidden;
}
.new-container .to-header{
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.new-container .to-header h2{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-blue-50);
}
.new-container .to-header h2:before {
    content: attr(id);
    color: var(--color-blue-50);
    font-size: 15rem;
    font-weight: bold;
    letter-spacing: 15px;
    opacity: .1;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(-15deg);
    z-index: 0;
    font-family: fantasy;
}
.new-container .to-list{
    display: grid;
    grid: auto / repeat(2, 1fr);
    gap: var(--space-md);
    z-index: 1;
    position: relative;
}
.new-container .up-card{
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    color: var(--color-text-primary);
}
.new-container .up-card a{
    font-size: .9em;
    color: var(--color-text-primary);
}
.new-container .up-card a::after {
    content: attr(id);
    font-size: .6em;
    opacity: .6;
    margin-left: var(--space-md);
}
@media (max-width: 768.9px) {
    .new-container{
        padding: var(--space-md);
    }
}

/* ==============================================
   文章页秘密保护样式
   ============================================== */
.password-protection {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.password-protection img{
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
}
.password-protection::after{
    content: '';
    background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 80%) 40%, #000000 60%, #000000) no-repeat center;
    inset: 0;
    position: absolute;
    height: 100vh;
    z-index: 0;
}
.protection-content{
    position: relative;
    z-index: 1;
    height: 100vh;
    width: 100%;
    padding: 5rem 1rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: var(--color-background);
    font-size: .6em;
    gap: var(--space-md);
}
.protection-content h3{
    font-size: 1.5rem;
    font-weight: bolder;
    text-align: center;
}
.protection-content p {
    font-size: .6em;
    line-height: 1.75rem;
    text-align: center;
}
.protection-content .protection-input{
    display: flex;
    margin-top: 5rem;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    outline: thin solid var(--color-blue-50);
    padding: 0.5rem;
    border-radius: 10px;
}
.protection-content .protection-input input{
    font-family: monospace,emoji;
    list-style: none;
    font-size: .9rem;
    border-radius: 10px;
    border: unset;
    padding: 0.5rem;
    height: auto;
    line-height: 1.5rem;
    background: none;
    color: var(--color-text-secondary);
    width: 100%;
}
.protection-content .protection-input button{
    border: 0;
    background: none;
    font-size: 1.2rem;
}
.protection-content .protection-input button svg{
    width: 1.2em;
    color: var(--color-background-blue);
    line-height: 1;
}
/* ==============================================
   文章内表格样式
   ============================================== */
.text-layout .table-wrapper  {
    max-height: 20rem;
    white-space: pre;
    font-size: .7em;
    border: thin solid var(--color-blue-20);
    border-radius: 10px;
    overflow: scroll visible;
    scrollbar-width: none;
    align-items: normal !important;
}
.text-layout .table-wrapper table{
    white-space: pre-wrap;
    table-layout: fixed;
    width: 100%;
}
.text-layout .table-wrapper table thead{
    border: 0;
    font-size: 1.1em;
    font-weight: 700;
}
.text-layout .table-wrapper table thead tr{
    transition: .3s;
}
.text-layout .table-wrapper table thead tr th{
    position: sticky;
    top: 0;
    border: 0;
    background: var(--color-background-blue);
}
.text-layout .table-wrapper tbody tr:nth-child(odd) {
    background: rgba(167,177,190,.04);
}
.text-layout .table-wrapper td, .text-layout .table-wrapper th{
    padding: 12px;
    padding-inline: 16px;
    border: 0;
}

/* ==============================================
   文章页面图片集处理
   ============================================== */
.text-layout .photo-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.text-layout .photo-grid .text-layout-img{
    flex-grow: 1;
}
.text-layout .photo-grid .text-layout-img{
    flex-grow: 1;
}
.text-layout .photo-grid .text-layout-img > span{
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
}
.text-layout .photo-grid >* img {
    display: block;
    max-width: 100%;
    border-radius:10px;
    object-fit: cover;
    transition: 0.5s;
    height: 15rem;
    max-height: 30vw;
    flex-grow: 1;
}
/* ==============================================
   手机端导航样式
   ============================================== */
.mobile-main,
.mobile-section {
	display: none;
}

@media (max-width: 768.9px) {
	.hero-nav {
		justify-content: space-between !important;
	}

	.nav-category-wrapper {
		display: none !important;
		/* 隐藏pc导航 */
	}

	.mobile-main,
	.mobile-section {
		display: block;
	}

	.mobile-section button {
		border: 0;
		background: none;
		transition: .2s;
	}

	.mobile-main {
		position: fixed;
		border-radius: 10px;
		inset: auto 1em 1em;
		width: auto;
		z-index: 9;
		padding: var(--space-md);
		max-width: 100%;
		max-height: calc(100% - var(--layout-nav-height) - 0.5em);
		transition: .5s;
		background: var(--color-white-80);
		outline: thin solid var(--color-blue-20);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		transform: scaleX(.9) translateY(110%);
	}

	.mobile-main.open {
		opacity: 1;
		transform: none;
		visibility: visible;
		pointer-events: auto;
	}

	.mobile-main span {
		font-size: .6em;
		color: var(--color-blue-50);
	}

	.mobile-main .mobile-nav {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		margin: var(--space-md) auto;
		font-size: .9rem;
		color: var(--color-text-primary);
	}

	.mobile-main .mobile-nav li {
		text-align: center;
		padding: var(--space-md);
		border-radius: 10px;
		transition: .5s;
	}

	.mobile-main .mobile-nav li:hover {
		background: var(--color-blue-5);
		color: var(--color-blue-50);
	}

	/* 遮罩层样式 */
	.mobile-overlay {
		display: none;
		/* 默认隐藏 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明黑色背景 */
		z-index: 8;
		/* 确保遮罩层在导航栏之下 */
	}
}